<template>
	<view class="page-container">
		<view class="status_bar">
		</view>
		<view class="content-wrap">
			<view class="logo-block">
				<image src="@/static/icon/login.png" class="logo"></image>
			</view>
			<view class="content">
				<form class="form" @submit="onAuthLogin">
					<view class="form-item">
						<hb-input v-model="form.username" :label="`${$t('email')}`" type="text"
							:placeholder="`${$t('register.emailPlace')}`"></hb-input>
					</view>
					<view class="form-item">
						<hb-input v-model="form.password" :label="`${$t('login.password')}`"
							:type="ispassword?'password':'text'" :placeholder="`${$t('login.passwordPlace')}`">
						</hb-input>
						<image src="@/static/icon/eye.png" mode="" @click="changePassType"></image>
					</view>
				</form>
				<view class="checkMark-wrap flexSpace">
					<label class="label">
						<checkbox class="checkbox" color="#E3892A" value="1" :checked="remember" @click="onRemember" />
						{{$t('login.rember')}}?
					</label>
					<text class="other-forget"
						@click="onNavigateTo('/pages/my/password/find?type=0')">{{$t('password.find')}}</text>
				</view>
				<view class="form-button">
					<view class="buttonBg" @click="onAuthLogin">{{$t('login')}}</view>
				</view>
				<view class="other">
					<text class="other-register"
						@click="onNavigateTo('/pages/register/index')">{{$t('login.register')}}</text>
				</view>
			</view>
		</view>
		<hb-app-update v-if="updateStatus" :updateInfo="updateInfo" @cancel="onUpdateCancel"></hb-app-update>
	</view>
</template>

<script>
	import {
		uploadPackage
	} from '@/api/configs'
	import HbAppUpdate from "../home/hb-app-update.vue";
	import {
		authLogin
	} from '../../api/auth';
	import HbInput from "./components/hb-input";
	import base64Code from '@/plugin/base64code.js';
	import {
		menu
	} from '@/api/menu'
	
	export default {
		name: "login",
		components: {
			HbInput,
			HbAppUpdate
		},
		data() {
			return {
				isAndroid:'',//
				remember: true,
				loading: '',
				ispassword: true,
				form: {
					username: '',
					password: '',
				},
				changeIndex:0,
				updateInfo: {},
				updateStatus: false, 
			}
		},
		onShow() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			var Locale = uni.getLocale()
			if(Locale == 'en'){
				this.changeIndex = 1
			}else{
				this.changeIndex = 0
			}
		},
		created() {
			// #ifdef APP-PLUS
			let updateStatusInfo = uni.getStorageSync('updateStatus');
			if (updateStatusInfo.d && updateStatusInfo.t > new Date().getTime()) {

			} else {
				let _this = this;
				uni.hideTabBar();
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					let platform = uni.getSystemInfoSync().platform == 'ios' ? 'iOS' : 'Android';
					_this.onVersionChecking(platform, widgetInfo)
				});
			}
			// #endif
		},
		methods: {
			onVersionChecking(platform, widgetInfo) {
				let _this = this;
				uploadPackage(platform, widgetInfo.version).then((res) => {
					let data = res.data;
					_this.updateInfo = Object.assign(_this.updateInfo, data);
					if (widgetInfo.version != data.vv) {
						_this.updateStatus = true;
					} else {
						uni.showTabBar();
					}
				})
			},
			onUpdateCancel() {
				uni.showTabBar();
				this.getUserInfo();
				uni.setStorageSync('updateStatus', {
					d: true,
					t: new Date().getTime() + 86400000
				});
				this.updateStatus = false;
			},
			gettabUrl() {
				menu().then(res => {
					if (res.code == 1000) {
						var data = base64Code.readdCode(res.data)
						this.taburls = res.data[0].child
					}
				})
			},
			changePassType() {
				this.ispassword = !this.ispassword
			},
			onNavigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			onRemember() {
				this.remember = !this.remember
			},
			onLocaleChange(e ,index) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								this.changeIndex  = index
								uni.setLocale(e);
							}
						}
					})
				} else {
					this.changeIndex  = index
					uni.setLocale(e);
					this.$i18n.locale = e;
				}
			},
			onAuthLogin() {
				if (this.form.username == '') {
					uni.showModal({
						content: this.$t('register.emailPlace'),
						showCancel: false
					});
					return;
				}
				if (this.form.password == '') {
					uni.showModal({
						content:this.$t('login.passwordPlace'),
						showCancel: false
					});
					return;
				}
				uni.showLoading();
				var time = Math.round(new Date().getTime()/1000);
				var data = {
					username:base64Code.adds(time,this.form.username),
					password: base64Code.adds(time,this.form.password),
					time:time
				}
				authLogin(data).then((res) => {
					uni.hideLoading();
					if(res.code == 1000){
						uni.setStorageSync('usersOnline', true);
						uni.setStorageSync('authorizationToken', res.data);
						this.$store.dispatch('getUserProfileAction');
						if (this.remember == true) {
							let userAccount = {
								username:this.form.username,
						        password:this.form.password,
							};
							uni.setStorageSync('userAccount', JSON.stringify(userAccount));
						}
						uni.switchTab({
							url: '/pages/home/index'
						});
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: rgba(255, 255, 255, 0.6);
	}

	.cale {
		padding: 40rpx;
		display: flex;
		justify-content: flex-end;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.page-container {
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		overflow: hidden;

		.content-wrap {
			margin-top: 160rpx;
		}

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.logo-block {
			margin-top: 100rpx;
			text-align: center;

			.logo {
				display: block;
				margin: 0 auto;
				width: 200rpx;
				height: 200rpx;
			}

			.app-name {
				margin-top: 10rpx;
				font-size: 32rpx;
				color: $hb-title-color;
				font-weight: bold;
			}
		}

		.content {
			padding: 0 60rpx;

			.form {
				margin-top: 100rpx;
				display: block;

				&-item {
					border-radius: 8rpx;
					flex-direction: row;
					align-items: center;
					margin-bottom: 28rpx;
					position: relative;

					image {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: 30rpx;
						right: 32rpx;
					}
				}
			}

			.checkMark-wrap {
				margin: 20rpx 0;
				color: $hb-text-color;
				font-size: 24rpx;
				align-items: center;

				.checkbox {
					color: $hb-primary-color;
					transform: scale(0.7);
				}
			}

			.other {
				text-align: center;
				margin-top: 20rpx;

				&-register {
					font-size: 24rpx;
					color: $hb-primary-color;
				}

				&-forget {
					font-size: 24rpx;
					color: $hb-text-color
				}
			}
		}

		.form-button {
			margin-top: 40rpx;
		}

	}
	.change{
		display:flex;
		align-items: flex-end;
		float:right;
		margin:36rpx 36rpx;
		font-size:28rpx;
		color:rgba(152, 154, 153, 1);
		.item{
			margin:0 10rpx;
			&.active{
				color: rgba(242, 160, 73, 1)
			}
		}
	}
</style>
